<template>
<div>
  <article :class="[{dHide: showMap}, $root.platformClass.topArticle]">
    <!-- 头部 -->
    <header class="headBar d-box">
      <aside class="asideBox" @click="$router.replace({name: 'GroupList'})">
        <i class="i-back"></i>
      </aside>
      <div class="headTitle b-flex">新建考勤组</div>
      <aside class="asideBox">
        <a href="javascript:;" class="nextStep" @click="toNextStep"><span>下一步</span></a>
      </aside>
    </header>
    <!-- 主体 -->
    <section class="">
      <ul class="groupInfo">
        <li class="d-box">
          <aside class="">考勤组名称</aside>
          <div class="b-flex ta_r">
            <input
              type="text"
              placeholder="请输入考勤组名称，最多20个字"
              maxlength="20"
              class="iptName"
              v-model.trim="attendanceName"/>
          </div>
        </li>
        <li class="d-box">
          <aside class="">考勤人员</aside>
          <div class="b-flex ta_r">
            <div class="addBtn" @click="addMembers">添加</div>
          </div>
        </li>
        <li class="d-box">
          <aside class="">考勤地点</aside>
          <div class="b-flex ta_r">
            <div class="addBtn" @click="showMap = !showMap">添加</div>
          </div>
        </li>
      </ul>
    </section>
  </article>
  <SetCheckPoint :show="showMap" @hidePanle="showPanle" @markPoint="updatePosition"></SetCheckPoint>
</div>
</template>

<script>
import RcsClient from '../../utils/rcsClient'
// import SetCheckPoint from './SetCheckPoint'
import { validateGroupName } from '../../utils'

export default {
  name: 'AddGroupOne',
  components: {
    // SetCheckPoint
  },
  data () {
    return {
      attendanceName: '',
      employees: [],
      position: null,
      showMap: false,
      rcsClient: new RcsClient()
    }
  },
  mounted () {
    // 打通vue与rcs注入的方法
    this.rcsClient.linkToRcs(this)
  },
  methods: {
    toNextStep () {
      this.validateFields((err) => {
        // alert(JSON.stringify(err))
        if (err) {
          this.showTip(err.msg)
          // alert(err.msg)
          return false
        }
        this.$root.setNewGroupName(this.attendanceName)
        this.$router.push({name: 'AddGroupStepTwo'})
      })
    },
    validateFields (callback) {
      const attendanceName = this.attendanceName.trim()

      if (!attendanceName) {
        callback({type: 'EMPTY_GROUP_NAME', msg: '考勤组名称不能为空'})
        return false
      }

      if (!this.position && (this.employees.length === 0)) {
        callback(this.employees.length === 0 ? {type: 'EMPTY_GROUP_MEMBER', msg: '请添加考勤人员'} : {type: 'EMPTY_GROUP_POSITION', msg: '请添加考勤地点'})
        return false
      }

      validateGroupName({
        enterId: this.$root['userInfo'].enterpriseId,
        groupName: attendanceName}
      , (duplicated) => {
        if (duplicated) {
          callback({type: 'GROUP_NAME_DUPLICATED', msg: '考勤组名称不能重复'})
        } else {
          callback(null)
        }
      })
    },
    showPanle () {
      this.showMap = !this.showMap
    },
    updatePosition (position) {
      this.position = position
      this.toNextStep()
    },
    addMembers () {
      // 使用和飞信选择器
      // this.rcsClient.call('selectEnterpriseContactMulti', '多选', 500, this.rcsClient.getRcsBackId(), 'rcsCallBack', '')

      // 使用通讯录h5选择
      this.rcsClient.call('getRCSToken', {backId: this.rcsClient.getRcsBackId(), backFunc: 'rcsCallBack'})
    },
    rcsCallBack (apiName, ...params) {
      this[apiName + 'CB'] && this[apiName + 'CB'](...params)
    },
    selectEnterpriseContactMultiCB (backId, contactInfo) {
      console.log(JSON.stringify(contactInfo[0]))
      this.employees.push(...contactInfo)
      this.$root.setNewGroupUsers(contactInfo)
      this.toNextStep()
    },
    getRCSTokenCB ({backId, status, token}) {
      // 初始化h5人员选择器
      this.openSelector({
        token,
        selectArray: [],
        multiSelect: true,
        callback: (res) => {
          if (res.result === 0) {
            this.employees.push(res.data)
            this.$root.setNewGroupUsers(res.data)
            this.toNextStep()
          } else if (res.result === 1) {
            // 触发取消按钮
          } else {
            this.showTip('选择器数据异常')
          }
        }
      })
    }
  }
}
</script>
